<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <!-- 根组件的挂载点 -->
    <div class="application"></div>

    <script src="vue.global.js"></script>

    <script>

        // 定义组件
        const show = {
            // 子组件通过 props 来接受由父组件通过 attribute 传递的数据
            props: [ 'id' , 'name' , 'gender' , 'person'],
            // 子组件模板
            template: `<div>
                           <span>{{ id }}</span>
                           <span>{{ name }}</span>
                           <span>{{ gender }}</span>
                           <p>{{ person ? JSON.stringify( person ) : '' }}</p>
                       </div>`
        }

        const options = {
            // 根组件模板
            template: `<div>
                          <!-- 在父组件中使用子组件时可能通过 attribute 为子组件传递数据 -->
                          <kaifamiao-show id="9527" name="华安" gender="靓仔"></kaifamiao-show>
                          <hr>
                          <kaifamiao-show :id="id" :name="name" :gender="gender"></kaifamiao-show>
                          <hr>
                          <input type="text" v-model="id" >
                          <input type="text" v-model="name" >
                          <input type="text" v-model="gender" >
                          <hr>
                          <kaifamiao-show :person="person"></kaifamiao-show>
                       </div>`,
            data(){
                return {
                    id: 8526 ,
                    name: '秋香' ,
                    gender: '靓妹' ,
                    person: {
                        firstName: 'Resp',
                        lastName: 'Jone'
                    }
                }
            },
            // 局部注册组件
            components: {
                'kaifamiao-show': show
            }
        }

        const app = Vue.createApp(options);
        const root = app.mount('.application');
    </script>
    
</body>
</html>